<template>
	<view>
		<view class="common">
			<view class="common-left">收货人</view>
			<view class="common-right">
				<input type="text" v-model="name" placeholder="请填写收货人姓名">
			</view>
		</view>
		<view class="common">
			<view class="common-left">手机号</view>
			<view class="common-right">
				<input type="number" maxlength="11" v-model="phone" placeholder="请填写收货人手机号">
			</view>
		</view>
		<view class="common">
			<view class="common-left">所在地区</view>
			<view class="common-right">
				<picker mode="region" @change="bindRegionChange" custom-item="全部">
					<view class="picker">
						<view style="padding-left: 20upx;" v-if="postData">{{postData}}</view>
						<view class="select-region-text" v-else>请选择省、市、区</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="common">
			<view class="common-left">地址</view>
			<view class="common-right">
				<textarea v-model="address" placeholder="请填写街道小区单元楼号"></textarea>
			</view>
		</view>
		<view class="common">
			<view class="common-left">标签</view>
			<view class="common-right">
				<view class="tags">
					<!-- <view class="tags-box">自己</view>
					<view class="tags-box">亲人朋友/家人</view> -->
					
					<view :class="item.is_choose ? 'tags-box tags-box-active' : 'tags-box'" v-for="item in tagsList" @click="choose_tag(item)">
						{{ item.name }}
						<view class="tags-box-img" @click.stop="edit_tag(item.id,item.name)" v-if="item.unionid != ''">
							<image v-if="!item.is_choose" src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/hyda-bi1.png" mode=""></image>
							<image v-if="item.is_choose" src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/hyda-bi.png" mode=""></image>
						</view>
					</view>
					<view class="tags-box tags-box-active" @click="add_tag(1)">添加</view>
				</view>	
			</view>
		</view>
		
		<view class="setmr">
			<view class="setmr-l">设置默认地址</view>
			<view class="setmr-r" @click="isDefault = !isDefault">
				<switch :checked="isDefault" color="#588BF9" style="transform:scale(0.8)" />
			</view>
		</view>	
		
		<view class="save-address" @click="add_address()">保存</view>
		
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" :title="pop_title" v-model="tag_text"
				placeholder="请输入标签" @confirm="down_pop"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buyUserid:'',
				name:'',
				phone:'',
				address:'',
				current_tagId:'', // 当前选择tagid 可不选
				postData:'', // 地址
				current_type:1, // 1新增 2修改
				isDefault:false,
				
				tag_text:'',
				pop_title:'',
				tagsList:[],
				current_edit_tagId:'',
			}
		},
		onLoad(req) {
			this.buyUserid = req.buyUserid;
			this.getTags();
		},
		methods: {
			// 获取标签列表
			getTags() {
				var data = {
					unionId:this.buyUserid,
				}
				this.$javaApi.doRequest("post","buying/group/customer/selectAddressTags",data).then(res=>{
					if(res.data.code == 0) {
						for(var i = 0; i < res.data.data.length; i++ ) {
							res.data.data[i].is_choose = false;
						}
						this.tagsList = res.data.data;
					}else {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
					}
				}) 
			},
			// 选择标签 -- 状态
			choose_tag(item) {
				for(var i = 0; i < this.tagsList.length; i++ ) {
					if(this.tagsList[i].id == item.id) {
						this.tagsList[i].is_choose = !this.tagsList[i].is_choose;
						if(this.tagsList[i].is_choose) {
							this.current_tagId = item.id
						}else {
							this.current_tagId = ''
						}
						// item.is_choose = !item.is_choose
					}else {
						this.tagsList[i].is_choose = false;
					}
				}
			},
			// 监听地址选择
			bindRegionChange(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				let tempData = ''
				for(let i in e.detail.value){
					tempData += e.detail.value[i] + ' '
				}
				this.postData = tempData
				console.log(this.postData.split(' '));
			},
			// 新增标签
			add_tag() {
				this.pop_title = '新增标签';
				this.tag_text = '';
				this.$refs.inputDialog.open()
			},
			// 修改标签
			edit_tag(id,name) {
				this.pop_title = '修改标签';
				this.tag_text = name;
				this.current_edit_tagId = id;
				this.$refs.inputDialog.open()
			},
			// 新增 / 修改 标签
			down_pop(val){
				console.log(val);
				if(this.pop_title == '新增标签') {
					var data = {
						unionid:this.buyUserid,
						tagName:val,
						tagId:0
					}
				}else {
					var data = {
						unionid:this.buyUserid,
						tagName:val,
						tagId:this.current_edit_tagId
					}
				}
				this.$javaApi.doRequest("post","buying/group/customer/saveAddressTag",data,'json').then(res=>{
					if(res.data.code == 0) {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
						this.tag_text = '';
						this.getTags();
						this.$refs.inputDialog.close()
					}else {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
					}
				}) 
			},
			// 新增地址
			add_address() {
				var data = {
					provinceName: this.postData.split(' ')[0], // 省名称
					cityName: this.postData.split(' ')[1], //市名称
					countyName: this.postData.split(' ')[2], // 县/区名称
					tagId: this.current_tagId ? this.current_tagId : 0, // 标签ids
					address: this.address, //地址
					isDefault: this.isDefault ? 1 : 0, // 默认
					name: this.name, // 姓名
					phone: this.phone, // 手机号
					unionid:uni.getStorageSync('unionid')
				}
				this.$javaApi.doRequest("post","buying/group/customer/saveAddressByMe",data,'json').then(res=>{
					if(res.data.code == 0) {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
						setTimeout(function() {
							uni.navigateBack()
						},1500)
					}else {
						uni.showToast({
							icon:'none',
							title:res.data.message,
						})
					}
				}) 
			},
		}
	}
</script>

<style scoped>
.common {
	width: 750upx;
	min-height: 100upx;
	line-height: 100upx;	
	display: flex;
	margin-top: 40upx;
}
.common-left {
	flex: 1;
	text-align: center;
	font-size: 32upx;
	color: #333;
}
.common-right {
	width: 520upx;
	margin-right: 30upx;
	min-height: 100upx;
	background-color: #fff;
	border-radius: 16upx;
}
.common-right input {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-left: 20upx;
}
.common-right textarea {
	width: 480upx;
	height: 150upx;
	margin: 20upx;
	line-height: normal;
}
.setmr {
	width: 690upx;
	height: 80upx;
	margin: 0 auto;
	margin-top: 40upx;
	line-height: 80upx;
	display: flex;
}
.setmr-l {
	flex: 1;
}
.save-address {
	width: 690upx;
	height: 100upx;
	line-height: 100upx;
	background-color: #FF7E3E;
	border-radius: 12upx;
	text-align: center;
	color: #fff;
	font-size: 32upx;
	position: fixed;
	bottom: 50upx;
	left: 30upx;
	box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25);
}
.select-region-text {
	color: #999;
	padding-left: 20upx;
}

.tags {
	width: 480upx;
	min-height: 150upx;
	margin: 20upx;
	line-height: normal;
	display: flex;
	flex-wrap:wrap;
}
.tags-box {
	min-width: 1upx;
	height: 40upx;
	line-height: 40upx;
	padding:0 10upx;
	color: #FF7E3E;
	border: 1upx solid #FF7E3E;
	border-radius: 5upx;
	margin-right: 20upx;
	display: flex;
	font-size: 24upx;
	box-sizing: border-box;
	margin-bottom: 10upx;
}
.tags-box-img {
	width: 30upx;
	height: 30upx;
	margin-left: 10upx;
}
.tags-box image {
	width: 24upx;
	height: 24upx;
	margin-top: 8upx;
}
.tags-box-active {
	background-color: #FF7E3E;
	color: #fff;
	border: none;
	box-sizing: border-box;
}
</style>
